<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 500px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                name:"商品",
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                  //刻度
                axisTick: {
                    show: true,
                    alignWithLabel:true
                },
            },
            yAxis: {
                name: "价格/元",
                 // 轴标题
                nameLocation: 'end',
                nameTextStyle: { fontSize: 16,color:"#333" },
                nameGap: 15,
                type: 'value',
                //刻度
                axisTick:{
                  show:true,
                  lineStyle:{color:'green', width: 2,length:5, type:"solid", shadowColor:"block" },
                  inside:true
                },
                 //轴线
                axisLine: {
                    show: true,
                    symbol:"arrow",
                    symbolSize:[5,5],
                    symbolOffset:[0,10],
                    lineStyle:{color:"red",width:3,type:'solid'}
                },
                //刻度标签
                 axisLabel:{
                    show:true,
                    inside:false
                 }
            },
            series: [
                {
                    type: 'bar',
                    data: [5, 80, 36, 40, 10, 50]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>